```html
<script setup>
  import * as hoverCard from "@zag-js/hover-card"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed, Teleport } from "vue"

  const service = useMachine(hoverCard.machine, { id: "1" })

  const api = computed(() => hoverCard.connect(service, normalizeProps))
</script>

<template>
  <a
    href="https://twitter.com/zag_js"
    target="_blank"
    v-bind="api.getTriggerProps()"
  >
    Twitter
  </a>
  <Teleport to="body" v-if="api.open">
    <div v-bind="api.getPositionerProps()">
      <div v-bind="api.getContentProps()">
        <div v-bind="api.getArrowProps()">
          <div v-bind="api.getArrowTipProps()" />
        </div>
        Twitter Preview
      </div>
    </div>
  </Teleport>
</template>
```
